html,body ,ul{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family:"microsoft yahei";
    font-size: 0.14rem;
}
li{
    list-style: none;
}
.wrapper{
  flex-direction: column;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  

  .header{
      width: 6.4rem;
      height: 0.9rem;
      background: #0cc440;
      text-align: center;
      line-height: 0.9rem;   
      flex-shrink: 0;            
      .personal_header{
          flex-grow: 1;
          font-size: 0.33rem;
          color: #fff; 
          display: none;
          p{
              padding-right:0.9rem;
          } 
      }
      .h_left{
          width: 0.9rem;
          height: 0.9rem;
          font-size: 0.32rem;
          color: #ffffff;
          float: left;      
      }
      .h_center{
          width: 4.45rem;
          height: 0.48rem;                  
          font-size: 0.22rem;        
          line-height: 0.9rem;
          padding-left: 1.05rem;
          padding-top: 0.22rem;
          padding-bottom: 0.2rem;
          float: left;
          .h_hotspot,.h_attention{
              width: 1.28rem;
              height: 0.48rem;
              float: left;
              line-height: 0.48rem;
          }
          .h_hotspot{
              color: #f9fffb;
              background: #63d985;
              border-bottom-left-radius: 0.25rem;
              border-top-left-radius: 0.25rem;
          }
          .h_attention{
              color: #85dfa9;
               background: #3dd066;
              border-bottom-right-radius: 0.25rem;
              border-top-right-radius: 0.25rem;
          }
        
          
        }
     
      
  }
   
  nav{
      width: 100%;
      height: 0.7rem;
      border-bottom: 1px solid #d9d9db;
      background:rgb(255,255,255);
      position:fixed;
      top: 0.9rem; 
//    margin-top: -2px;     
      ul{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          font-size: 0.26rem;      
          
          li{
              width: 2rem;
              height: 100%;
              text-align: center;
              line-height: 0.7rem;
              box-sizing: border-box;
             
          }
          .show{
              color: #1dbe34;
              border-bottom: 5px solid #08c63e;
          }
      }
    }
  
  .fav,.personal{
      height:100%;
      flex-grow: 1;
      overflow-y: auto;
      display: none;
      .fav_wrap{
          width: 100%;    
          .f_top{
              width: 100%;
              height: 1.43rem;
              display: flex;
              .ft_left{
                  width: 1.38rem;
                  height: 1.43rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  img{
                      display: block;
                      width: 0.96rem;
                      height: 0.96rem;
                      border: 1px solid #aeaeae;
                      border-radius: 100%;
                  }
              }
              .ft_right{
                  flex-grow: 1;
                  font-size: 0.26rem;                 
                  padding: 0.2rem 0.22rem 0.2rem 0;              
                  .ftr_wrap{
                      overflow: hidden;
                  
                  h3{
                      float: left;
                  }
                  .praise{
                     float: right;
                     font-size: 0.2rem;
                     color: #d2d2d2;
                     .tubiao{
                         font-size: 0.2rem;
                     }
                   }
                 }
                 .signature{
                     padding-top: 0.2rem;
                     color: #a0a0a0;
                     font-size: 0.23rem;
                 }
              }
          }
          .f_bottom{
              width: 100%;
              border-bottom: 1px solid #e4e4e4;             
              img{
                  width: 100%;
                  height: 5.68rem;
              }
              p{            
                  height: 0.67rem;
                  padding-left: 0.4rem;
                  line-height: 0.67rem;
                  font-size: 0.23rem;
                  color: #303030;
              }
          }
          .p_bottom{
              width: 100%;
              .p_nav{
                  width: 100%;
                  height: 0.5rem;
                  display: flex;
                  justify-content: space-between;
                  border-bottom: 1px solid #e5e5e5;
                  li{                    
                      width: 2rem;
                      height: 100%;
                      font-size:0.22rem;
                      box-sizing: border-box;
                      text-align: center;
                      line-height: 0.5rem;
                      color: #9c9c9c;
                  }
                  .p_style{
                      color: #0cc53c;
                      border-bottom: 5px solid #0cc53c;
                  }
              }
              #p_picture{
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
              }
          }
      }
  }
  
}
